<template>
    <section>
        <!-- 背景色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
            <!-- 登录框 -->
            <div class="container">

                <div class="form">
                    <h2>登录</h2>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                        <div class="inputBox">
                            <input v-model="ruleForm.email" type="text" placeholder="邮箱">
                        </div>
                        <div class="inputBox">
                            <input v-model="ruleForm.password" type="password" placeholder="密码">
                        </div>
                        <div class="inputBox">
                            <el-button class="submit" @click="submitForm('ruleForm')" >登录</el-button>
                        </div>
                        <p class="forget">没有账户？
                            <router-link to="/register" style="text-decoration: none;">注册</router-link>
                        </p>
                    </el-form>
                </div>

            </div>
        </div>



    </section>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    email:'',
                    password:'',
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },

                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],


                }
            };
        },
        methods: {
            submitForm(formName) {
                const _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("http://localhost:8181/register/login", this.ruleForm).then(function (resp) {
                            if (resp.data.msg == 'success') {
                                const token = resp.headers['authorization'];
                                _this.$store.commit('SET_TOKEN', token);
                                _this.$store.commit('SET_USERINFO', resp.data.data)
                                console.log(resp.data.data)
                                _this.$alert('欢迎您：' + _this.ruleForm.email , '消息', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        _this.$router.push('/')
                                    }
                                });
                            }else {
                                _this.$message({
                                    message: '邮箱或密码错误！',
                                    type: 'warning'
                                });
                                return false;
                            }
                        })
                    } else {
                        _this.$message({
                            message: '用户名或密码错误！',
                            type: 'warning'
                        });
                        return false;
                    }
                });
            },

        }
    }

</script>

<style src="../../assets/css/login.css" scoped>

</style>